<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script> 
</head>
<body class="dpflex fdcolumn ">
  <header>
      <!-- 轮播图 -->
  
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./imgs/index-swiper-bg1.jpg" alt="#"></div>
                <div class="swiper-slide"><img src="./imgs/index-swiper-bg2.jpg" alt="#"></div>
                <div class="swiper-slide"><img src="./imgs/index-swiper-bg3.jpg" alt="#"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
           
        </div>
      
      <main>
          <div class="plate-one dpflex">
              <!-- 排名 -->
             <div class="rank ">
                <span>今日排名</span>
                <i></i>
                <p id="rank-count"></p>
             </div>
             <!-- 打卡 -->
             <div class="punch  ml12">
                 <span>累计打卡<b id="punch-count"></b>天</span>
                 <i></i>
                 <p id="punch-today"></p>
             </div>
          </div>
          <div class="plate-two dpflex mt16">
              <!-- 运动数据 -->
              <div class="sport-count flex1 mr10">
                <span>运动数据</span>
                <i></i>
              </div>
              <!-- 运动徽章 -->
              <div class="badge flex1">
                <span class="add">累计运动徽章</span>
                <i></i>
                <p> <span id="badge-count"></span>枚</p>
              </div>
          </div>
          <!-- 课程训练 -->
          <div class="plate-three mt16">
               <span>课程训练</span>
          </div>
          <div class="outrun mt16">
            <span>户外跑步</span>
          </div>

      </main>
   
  </header>
  <footer>
      <!-- <a href="#">
          <div class="iconfont icon-fangzi"></div>
          <p class="footcolor">首页</p>
      </a>
      <a href="#">
         <div class="iconfont icon-jiankang"></div>
          <p class="footcolor">运动</p>
      </a>
      <a href="#">
         <div class="iconfont icon-shouye3"></div>
          <p class="footcolor">我的</p>
      </a> -->
      
  </footer> 
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>
</html>